<template>
  <div class="points-rules-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">积分规则</h2>
      <p class="page-subtitle">了解积分获得、使用和过期规则</p>
    </div>

    <!-- 积分获得规则 -->
    <div class="rules-section">
      <div class="section-header">
        <van-icon name="plus" class="section-icon earned" />
        <h3 class="section-title">积分获得</h3>
      </div>
      <div class="rules-content">
        <div class="rule-item">
          <div class="rule-title">购买商品</div>
          <div class="rule-desc">每消费1元获得1积分</div>
          <div class="rule-example">示例：购买100元商品，获得100积分</div>
        </div>
        <div class="rule-item">
          <div class="rule-title">签到奖励</div>
          <div class="rule-desc">每日签到可获得积分奖励</div>
          <div class="rule-example">连续签到天数越多，奖励越丰厚</div>
        </div>
        <div class="rule-item">
          <div class="rule-title">活动奖励</div>
          <div class="rule-desc">参与平台活动可获得额外积分</div>
          <div class="rule-example">限时活动、节日活动等</div>
        </div>
        <div class="rule-item">
          <div class="rule-title">推荐奖励</div>
          <div class="rule-desc">成功推荐好友注册可获得积分</div>
          <div class="rule-example">每成功推荐1人，获得50积分</div>
        </div>
      </div>
    </div>

    <!-- 积分使用规则 -->
    <div class="rules-section">
      <div class="section-header">
        <van-icon name="minus" class="section-icon used" />
        <h3 class="section-title">积分使用</h3>
      </div>
      <div class="rules-content">
        <div class="rule-item">
          <div class="rule-title">积分购买</div>
          <div class="rule-desc">可在积分专区使用积分购买商品</div>
          <div class="rule-example">部分商品支持纯积分购买</div>
        </div>
        <div class="rule-item">
          <div class="rule-title">抵扣现金</div>
          <div class="rule-desc">100积分可抵扣1元现金</div>
          <div class="rule-example">单次订单最多可使用50%积分抵扣</div>
        </div>
        <div class="rule-item">
          <div class="rule-title">兑换优惠券</div>
          <div class="rule-desc">可使用积分兑换各类优惠券</div>
          <div class="rule-example">满减券、折扣券等</div>
        </div>
      </div>
    </div>

    <!-- 积分过期规则 -->
    <div class="rules-section">
      <div class="section-header">
        <van-icon name="clock-o" class="section-icon expired" />
        <h3 class="section-title">积分过期</h3>
      </div>
      <div class="rules-content">
        <div class="rule-item">
          <div class="rule-title">有效期</div>
          <div class="rule-desc">积分获得后有效期为365天</div>
          <div class="rule-example">超过有效期未使用的积分将自动过期</div>
        </div>
        <div class="rule-item">
          <div class="rule-title">过期提醒</div>
          <div class="rule-desc">积分即将过期前会收到提醒</div>
          <div class="rule-example">建议及时使用即将过期的积分</div>
        </div>
        <div class="rule-item">
          <div class="rule-title">过期处理</div>
          <div class="rule-desc">过期积分无法恢复，请及时使用</div>
          <div class="rule-example">定期查看积分明细，了解积分状态</div>
        </div>
      </div>
    </div>

    <!-- 注意事项 -->
    <div class="rules-section">
      <div class="section-header">
        <van-icon name="info-o" class="section-icon info" />
        <h3 class="section-title">注意事项</h3>
      </div>
      <div class="rules-content">
        <div class="notice-item">
          <van-icon name="warning-o" class="notice-icon" />
          <span>积分不可转让、不可兑换现金</span>
        </div>
        <div class="notice-item">
          <van-icon name="warning-o" class="notice-icon" />
          <span>部分商品不支持积分购买或抵扣</span>
        </div>
        <div class="notice-item">
          <van-icon name="warning-o" class="notice-icon" />
          <span>积分使用后不可退回</span>
        </div>
        <div class="notice-item">
          <van-icon name="warning-o" class="notice-icon" />
          <span>平台保留积分规则解释权</span>
        </div>
      </div>
    </div>

    <!-- 返回按钮 -->
    <div class="action-buttons">
      <van-button 
        type="primary" 
        size="large" 
        @click="goBack"
        class="back-btn"
      >
        返回
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
  router.back()
}
</script>

<style lang="scss" scoped>
.points-rules-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20px 10px;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  
  .page-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px 0;
  }
  
  .page-subtitle {
    font-size: 16px;
    color: #666;
    margin: 0;
  }
}

.rules-section {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  
  .section-header {
    background: linear-gradient(135deg, #157658 0%, #2d8f7a 100%);
    padding: 20px;
    display: flex;
    align-items: center;
    color: #fff;
    
    .section-icon {
      font-size: 24px;
      margin-right: 15px;
      
      &.earned {
        color: #4caf50;
      }
      
      &.used {
        color: #ff9800;
      }
      
      &.expired {
        color: #999;
      }
      
      &.info {
        color: #2196f3;
      }
    }
    
    .section-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0;
      color: #fff;
    }
  }
  
  .rules-content {
    padding: 20px;
    
    .rule-item {
      padding: 15px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .rule-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 8px;
      }
      
      .rule-desc {
        font-size: 14px;
        color: #666;
        margin-bottom: 6px;
      }
      
      .rule-example {
        font-size: 12px;
        color: #999;
        font-style: italic;
      }
    }
    
    .notice-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .notice-icon {
        color: #ff9800;
        margin-right: 10px;
        font-size: 16px;
      }
      
      span {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
      }
    }
  }
}

.action-buttons {
  margin-top: 30px;
  
  .back-btn {
    width: 100%;
    background: linear-gradient(135deg, #157658 0%, #2d8f7a 100%);
    border: none;
    
    &:hover {
      background: linear-gradient(135deg, #2d8f7a 0%, #157658 100%);
    }
  }
}
</style> 